<template>
  <div>
    <roofVue title="商品列表"></roofVue>
    <div style="padding: 5px">
      <van-tabbar v-model="active" :fixed="false" active-color="red">
        <van-tabbar-item>综合</van-tabbar-item>
        <van-tabbar-item @click="sort">
          价格
          <van-icon name="sort" />
        </van-tabbar-item>
        <van-tabbar-item>新品</van-tabbar-item>
      </van-tabbar>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-grid :column-num="2">
          <van-grid-item
            v-for="i in setpro"
            :key="i.id"
            style="padding: 0.1rem; width: 50vw; height: 70vw"
            @click="product(i.id)"
          >
            <img
              style="width: 100%; height: 20vh"
              :src="imgurl + i.defaultImg"
              alt=""
            /><br />
            <div style="width: 100%" class="van-ellipsis">{{ i.name }}</div>
            <span>{{ i.shopPrice }}</span>
          </van-grid-item>
          <van-button class="xiangshang" @click="hui" type="info"
            ><van-icon name="arrow-up"
          /></van-button>
        </van-grid>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      active: 0,
      isLoading: true,
      index: 1,
      loading: false,
      finished: false,
      setpro: [],
      total: "",
      isads: true,
    };
  },
  components: {
    roofVue,
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    // 请求商品列表
    async getpro() {
      let res = await this.$post(this.url + "catalog/search/product", {
        productName: "",
        pageSize: 10,
        currentPage: this.index,
      });
      if (res.errorCode == "0") {
        // this.setpro = res.data.productList;
        this.setpro.push(...res.data.productList);
        this.total = res.data.totalPage;
      }
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.index++;
        this.getpro();
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.total <= this.index) {
          this.finished = true;
        }
      }, 1000);
    },
    // 回顶部
    hui() {
      window.scrollTo(0, 0);
    },
    // 排序
    sort() {
      if (this.isads) {
        for (let i = 0; i < this.setpro.length - 1; i++) {
          //外层循环管趟数
          for (let j = 0; j < this.setpro.length - i - 1; j++) {
            //里面的循环管 每一趟的交换次数
            //内部交换2个变量的值 前一个和后面一个数组元素相比较
            if (this.setpro[j].shopPrice < this.setpro[j + 1].shopPrice) {
              var temp = this.setpro[j];
              this.setpro[j] = this.setpro[j + 1];
              this.setpro[j + 1] = temp;
            }
          }
        }
        console.log(this.setpro);
      } else {
        for (let i = 0; i < this.setpro.length - 1; i++) {
          //外层循环管趟数
          for (let j = 0; j < this.setpro.length - i - 1; j++) {
            //里面的循环管 每一趟的交换次数
            //内部交换2个变量的值 前一个和后面一个数组元素相比较
            if (this.setpro[j].shopPrice > this.setpro[j + 1].shopPrice) {
              var temp = this.setpro[j];
              this.setpro[j] = this.setpro[j + 1];
              this.setpro[j + 1] = temp;
            }
          }
        }
        console.log(this.setpro);
        this.getpro();
      }
      this.isads = !this.isads;
    },
    // 跳转
    product(id) {
      this.Sto.Session.set("productId", id);
      this.$router.push("/product");
    },
  },
  created() {
    this.getpro();
  },
};
</script>

<style  scoped>
.xiangshang {
  position: fixed;
  bottom: 4rem;
  right: 1rem;
}
</style>